/**
 * Created by lizi on 2017/4/17.
 */
(function () {
	function tabulate(data, columns) {
		var table = d3.select("#container").append("table"),
			thead = table.append("thead"),
			tbody = table.append("tbody");

		// append the header row
		thead.append("tr")
			.selectAll("th")
			.data(columns)
			.enter()
			.append("th")
			.text(function (column) {
				console.log(17, column);
				return column;
			});

		// create a row for each object in the data
		var rows = tbody.selectAll("tr")
			.data(data)
			.enter()
			.append("tr");

		// create a cell in each row for each column
		var cells = rows.selectAll("td")
			.data(function (row) {
				return columns.map(function (column) {
					console.log(31, column, row[column], row);
					return {column: column, value: row[column]};
				});
			})
			.enter()
			.append("td")
			.text(function (d) {
				console.log(38, d);
				return d.value;
			});

		return table;
	}

// create some people
	var people = [
		{name: "Jill", age: 30, score: 8, grade: 7},
		{name: "Bob", age: 32, score: 8, grade: 7},
		{name: "George", age: 29, score: '', grade: 7},
		{name: "Sally", age: 31, score: 8, grade: 7}
	];

// render the table
	var peopleTable = tabulate(people, ["name", "age", "score", "grade"]);

// uppercase the column headers
	peopleTable.selectAll("thead th")
		.text(function (column) {
			return column.charAt(0).toUpperCase() + column.substr(1);
		});

// sort by age
	peopleTable.selectAll("tbody tr")
		.sort(function (a, b) {
			// return d3.descending(a.age, b.age);
		});

})();